<template>
	<view>
		<view class="commodity-list"  v-for="(item,index) in list" :key='index' @click="commodity_click(item,index)">
			<view class="left_img">
				<view class="secondKill" v-if="isSecondKill">
					<view v-if="isSecondKillType==1">
						<view v-if="item.stock == 0" class="sellOut">已售罄</view>
						<view class="today" v-if="nowTime>item.time_from && nowTime<item.time_to">进行中</view>
						<view v-if="nowTime>item.time_to" class="sellOut">已结束</view>
						<view class="tomorrow" v-if="nowTime<item.time_from">即将开始</view>
					</view>
					<view class="tomorrow" v-if="isSecondKillType==2">即将开始</view>
				</view>
				<image :src="item.cover" mode=""></image>
			</view>
			<view class="right_content">
				<view class="commodity_name">{{item.name}}</view>
				<view class="tag" v-if="!isSecondKill">
					<text v-for="(items,indexs) in item.topicList" :key = 'indexs'>{{items.title}}</text>
				</view>
				<view class="time" v-if="isSecondKill">
					开始时间：{{item.time_from | parseTime}}
				</view>
				<view class="price">
					<view class="first_child">
						<view class="price_present"><text class="unit">￥</text>{{item.selling_price}}</view>
						<view class="price_original"><text class="unit">￥</text>{{item.actual_price}}</view>
					</view>
					<view class="people">满员：{{item.join_number || 0}}/{{item.people_number|| 0}}人</view>
				</view>
				<view class="commodity_button" :style="{backgroundImage: 'url('+IMGLink+'/index/goodsbtn.png)'}">
					<view> 未购中分{{item.total_red_packet || ''}}元红包</view>
					<view>参与</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				value: []
			},
			isSecondKill: {
				type: Boolean,
				value: false
			},
			isSecondKillType: {
				type: Number,
				value: 0 // 0 || 1  0=今日秒杀  1=明日预览
			}
		},
		data() {
			return {
				nowTime:Date.now()/1000,
				IMGLink:this.IMGLink,
			}
		},
		created() {

		},
		filters:{
			parseTime(s){
				const time = new Date(s*1000);
				const toZero = (n)=> n>9?n:'0'+n;
				return toZero(time.getHours()) + ':' + toZero(time.getMinutes())
			}
		},
		methods: {
			commodity_click(item, index) {
				this.$emit('commodity_click', {
					...item,
					index
				})
			}
		}
	}
</script>

<style scoped>
	image{
		display: block;
		width: 100%;
		height: 100%
	}
	.commodity-list {
		height: 306rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		padding: 22rpx 20rpx;
		display: flex;
		justify-content: space-between;
		font-family: PingFangSC-Medium, PingFang SC;
	}

	.left_img {
		height: 100%;
		width: 238rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #C8C7CC;
		position: relative;
	}

	.right_content {
		width: 384rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.commodity_name {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 24rpx;
		font-weight: 500;
		color: #0A0C0D;
	}

	.commodity_button {
		width: 100%;
		height: 64rpx;
		display: flex;
		border-radius: 32rpx;
		justify-content: space-between;
		align-items: center;
		background-size: 100%;
		box-sizing: border-box;
		padding: 0 32rpx;
	}

	.commodity_button>view {
		display: inline-block;
	}

	.commodity_button>view:nth-child(1) {
		font-size: 24rpx;
		font-weight: 400;
		color: #F54642;
	}

	.commodity_button>view:nth-child(2) {
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.price {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.people {
		font-size: 20rpx;
		font-weight: 400;
		color: #8B8C8D;
	}

	.unit {
		font-size: 24rpx;
	}

	.price_present {
		display: inline-block;
		color: #F54642;
		margin-right: 8rpx;
		font-size: 28rpx;
	}

	.price_original {
		display: inline-block;
		color: #8B8C8D;
		text-decoration: line-through;
		font-size: 26rpx;
	}

	.tag>text {
		display: inline-block;
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 2rpx solid #FF6A90;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		text-align: center;
		font-weight: 400;
		color: #FF6A90;
		margin-right:10rpx ;
	}

	.secondKill {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 2;
		height: 48rpx;
		width: 100%;
	}
	.today,.tomorrow,.sellOut{
		width: 100%;
		height: 100%;
		text-align: center;
		line-height: 48rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.today{
		background-color:#F54642 ;
	}
	.tomorrow{
		background-color: #FF9795;
	}
	.sellOut{
		background-color: #CCCCCC;
	}
	.time{
		font-size: 24rpx;
		font-weight: 400;
		color: #535353;
	}
</style>
